<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" type="text/css" href="ui/pages/login.css">
<link rel="stylesheet" type="text/css" href="ui/style.css">
<link rel="stylesheet" type="text/css" href="ui/bootstrap.css">
<link rel="stylesheet" type="text/css" href="ui/bootstrap-responsive.min.css">
 <link rel="stylesheet" type="text/css" href="ui/pages/dashboard.css">
  <link rel="stylesheet" type="text/css" href="ui/pages/calendar.css">
  	<link rel="stylesheet" type="text/css" href="ui/pages/glDatePicker.default.css">
  <link href='http://fonts.googleapis.com/css?family=Oregano' rel='stylesheet' type='text/css'>

<link href="http://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,400,600" rel="stylesheet">
	<!-- Simple CSS file for HTML page -->
	<link rel="stylesheet" href="ui/pages/main.css" type="text/css" media="screen" title="no title" charset="utf-8">

	<!-- jCalendar CSS - Contains Tipsy CSS - Delete as needed -->
	<link rel="stylesheet" href="ui/pages/calendar.css" type="text/css"  charset="utf-8">

	
<p> </p>
<p> </p>
<br>
    <title>CVS Holiday Management (NIDC)|</title>
  </head>
  <body>
  
   
    
  <div class="navbar navbar-fixed-top">
  <div class="navbar-inner">
    <div class="container"> <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"><span
                    class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span> </a><a class="brand" href="index.html"> <div class = pageHeader>CVS Holiday Management </div> </a>
      <div class="nav-collapse">
        <ul class="nav pull-right">
         	<li class="dropdown"><a href="login">Logout </a>
            <ul class="dropdown-menu">
              <li><a href="login">Logout</a></li>
              <li><a href="javascript:;">Help</a></li>
            </ul>
          </li>
     
        </ul>
        <form class="navbar-search pull-right">
          <input type="hidden" class="search-query" placeholder="Search">
        </form>
      </div>
      <!--/.nav-collapse --> 
    </div>
    <!-- /container --> 
  </div>
  <!-- /navbar-inner --> 
</div>
  
   <div class="subnavbar">
  <div class="subnavbar-inner">
    <div class="container">
      <ul class="mainnav">
        <li ><a href="index.html"><i class="icon-dashboard"></i><span>Home</span> </a> </li>
        <li><a href="book"><i class="icon-dashboard"></i><span>Book</span> </a> </li>
        <li class="active"><a href="showmydays"><i class="icon-dashboard"></i><span>View</span> </a></li>
   		<li><a href="admin"><i class="icon-facetime-video"></i><span>Admin</span> </a></li>
          </ul>
        </li>
      </ul>
    </div>
    <!-- /container --> 
  </div>
  <!-- /subnavbar-inner --> 
</div>
<!-- /subnavbar -->

	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
	<script type="text/javascript" src="js/glDatepicker.js">
	</script>
	
	<div class = "datepickcontain calenRow">
		<input id="date1" class="mydate" type="text" size="20" readonly />

	 <script type="text/javascript">
	
	 var otherCollection =[]
	 <c:forEach items="${man}" var="it">
	 	otherCollection.push({
			 date: new Date("${it.mandatoryDay}"),
			 data: {message: "Mandatory Day"}
		 });
	</c:forEach>
	 
	 
	 

	 var myCollection = []
	 <c:forEach items="${day}" var="item">
	 	myCollection.push({
			 date: new Date("${item}"),
			 data: {message: "Day Off"}
		 });
	</c:forEach>
		 

	
	 var month = 0;
	 $( ".mydate" ).each(function( ) {
		 $(this).glDatePicker(
		        	{	dowOffset: 1,
		        		showAlways: true,
		        		mandatoryDates: otherCollection,
		        		specialDates: myCollection,     		
		        		selectedDate: new Date(),
		        		onClick: function(target, cell, date, data) {
		        		      var month = date.getMonth();  
		        			  target.val(date.getFullYear() + '-' +
		        		                    month+ '-' +
		        		                    date.getDate());
		
		        		        if(data != null) {
		        		            alert(data.message + '\n' + date);
		        		        }
		        		    }
		        	}	
		        	
		        	);
		 month++;
	 });
	 
	 $( ".mydate" ).each(function( ) {
		$(this).show(); 
	 });
	    </script>
	 </div>
	</div>
		<ul>
		</ul>
	<div class ="pageHeader">
 My Approved Holidays
 </div>
  <br>
    <p></p>
  <c:forEach items="${days}" var="item">
	
 Date Requested: ${item.date}<br> 
 Start Date:   ${item.startDate}<br>
 End Date:	   ${item.endDate}<br>
 <input type="hidden" value="${item.id}" name="jamcup" id="jamcup"/>
  <p></p>
</c:forEach>
<br>
<div class ="pageHeader">
My Mandatory Days:
 </div>
<p></p>
<br>
<c:forEach items="${man}" var="it">
			Mandatory Day: ${it.mandatoryDay}<br>
				<input type="hidden" value="${it.id}" name="cool" id="cool"/>	
	  <p></p>	
		</c:forEach>
</div> 

 </div>
 
  </body>
</html>